<template>
  <el-row :gutter="24" style="margin-left: 10px">
    <el-form :inline="true">
      <el-form-item> </el-form-item>

      <el-form-item label="权限组名称">
        <el-input v-model="input1" placeholder="权限组名称"></el-input>
      </el-form-item>
      <el-form-item label="排序值">
        <el-input v-model="input1" placeholder="排序值越大越靠前"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addTab(editableTabsValue)"
          >保存</el-button
        >
        <el-button type="primary" @click="addTab(editableTabsValue)"
          >删除</el-button
        >
      </el-form-item>
    </el-form>
    <el-col :span="24">
      <el-tabs class="table-form-detail" type="border-card">
        <el-tab-pane
          ><span slot="label"
            ><el-checkbox v-model="menu1">工作台</el-checkbox>
          </span>
          <div>
            <p class="tablemenu-title">
              <el-checkbox label="设备点检"></el-checkbox>
            </p>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
              <el-checkbox label="禁用" disabled></el-checkbox>
              <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group>
            <p class="tablemenu-title">
              <el-checkbox label="设备保养"></el-checkbox>
            </p>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="复选框 A"></el-checkbox>
              <el-checkbox label="复选框 B"></el-checkbox>
              <el-checkbox label="复选框 C"></el-checkbox>
              <el-checkbox label="禁用" disabled></el-checkbox>
              <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-tab-pane>
        <el-tab-pane
          ><span slot="label"
            ><el-checkbox v-model="menu1">设备台账</el-checkbox>
          </span>
          <div>456</div>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      menu1: true,
      editableTabsValue: "2",
      checkList: ["选中且禁用", "复选框 A"],
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
    };
  },
  methods: {},
};
</script>
<style lang="scss">
.tablemenu-title {
  border-bottom: 2px solid #eef2f6;
  padding: 12px 6px 12px 6px;
}
</style>
